<style>
.symbols_type_max {
  height: 71vh;
  min-height: 420px;
  overflow-y: auto;
}
.card-container {
  display: flex;
  justify-content: space-between;
}
</style>

<template>
  <div>
    <div id="title">
      <h1 style="text-align: center; margin-top: 10px">我的问卷</h1>
      <!-- <h3 style="text-align: center;margin-bottom: 10px;">You can manage your tasks here</h3> -->
    </div>
    <br /><br />
    <Row>
      <Col span="16" offset="4">
        <div style="margin-left: 20px">
          <el-button @click="createQues" type="primary" size:medium>创建问卷</el-button>
        </div>
        <div style="height: 600px; overflow: auto; margin-left: 20px">
          <h2>问卷列表</h2>

          <div
            v-for="(item, index) in questionCreated"
            :key="index.questionId"
            :padding="3"
          >
            <Card style="margin: 5px">
              <!-- <Button type="default" @click="answerPage">预览</Button> -->
              <!-- <div
                    v-for="(item, index) in questionCreated"
                    :key="index.questionId"
                    :padding="3" 
                    > -->
              <div>
                <span
                  style="padding: 5px; cursor: pointer"
                  @click="showQuestion(index, questionCreated)"
                >
                  <strong style="color: #57a3f3" class="name" :title="item.name">{{
                    item.name
                  }}</strong>
                </span>

                <div style="float: right">
                  <template>
                    <span
                      style="
                        margin-left: 5px;
                        margin-right: 3px;
                        cursor: pointer;
                        color: gray;
                      "
                      title="Delete"
                      @click="answerPage(index, questionCreated)"
                    >
                      <Icon type="ios-trash" :size="20" color="gray" />
                    </span>
                    <span
                      style="
                        margin-left: 5px;
                        margin-right: 3px;
                        cursor: pointer;
                        color: gray;
                      "
                      title=" Preview"
                      @click="previewQuestions(index, questionCreated)"
                    >
                      <Icon type="ios-eye" :size="20" color="gray" />
                    </span>

                    <span
                      style="
                        margin-left: 5px;
                        margin-right: 3px;
                        cursor: pointer;
                        color: gray;
                      "
                      title="Download"
                      @click="questionDownload(index, questionCreated)"
                    >
                      <Icon type="ios-cloud-download-outline" :size="20" color="gray" />
                    </span>
                  </template>
                </div>
                <p style="word-break: break-word; padding: 5px; cursor: pointer">
                  {{ item.description }}
                </p>
                <p style="word-break: break-word; padding: 5px; cursor: pointer">
                  <Button type="info">问卷编辑</Button>
                  <Button type="info">发布考试</Button>

                  <!-- {{ item.description }} -->
                </p>
              </div>
            </Card>
          </div>
        </div>
      </Col>
      <!-- <Col span="16">
        <div class="symbols_type_max">
          <el-col v-for="(item, index) in classTests" :key="index" span="6" :padding="3">
            <Card style="height: 200px; width: 200px; margin-left: 20px; margin-top: 25%">
              <div slot="title">
                <span>{{ item.name }}</span>
                <el-tag style="float: right">考试</el-tag>
              </div>
            </Card>
          </el-col>
        </div>
      </Col> -->
    </Row>
  </div>
</template>
<script>
import { get, post, del, put } from "@/axios";
export default {
  data() {
    return {
      questionCreated: [],
      classTests: [
        {
          name: "摄影测量",
        },
        {
          name: "地理信息系统",
        },
        {
          name: "地图学",
        },
      ],
    };
  },
  mounted() {
    this.viewTests();
  },
  methods: {
    async viewTests() {
      let page = 0;
      let size = 100;
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/test/" + page + "/" + size
        );
        // console.log(res.data.data);
        this.questionCreated = res.data.data.content;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    createQues() {
      this.$router.push("/classTests");
    },
    previewQuestions() {
      this.$router.push("/Static");
    },
  },
};
</script>
